<template>
	<view>
		<view class="box">
			<view class="left">
				分类名称
			</view>
			<view class="">
				<input type="text" value="" v-model="classname" placeholder="请输入分类名称" />
			</view>
		</view>
		<view class="boxs">
			<view class="left">
				分类图片
			</view>
			<view class="right" @click="addimage" v-if="image.length<=0">
				+
			</view>
			<view class="image" @click="addimage" v-if="image.length>0">
				<image :src="image" mode=""></image>
			</view>
		</view>

		<view class="button" @click="addclass">
			添加分类
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				classname: '', //名字
				image: "",
				imgurl: this.$imgurl,
			}
		},
		methods: {
			//添加分类
			addclass() {
				var that = this
				if (that.classname.length <= 0) {
					uni.showToast({
						title: "请输入分类名字",
						icon: "none"
					})
					return false
				}
				if (that.image.length <= 0) {
					uni.showToast({
						title: "请选择图片",
						icon: "none"
					})
					return false
				}
				uni.uploadFile({
					url: app.globalData.upimgurl + '/api/user/store/doUpload',
					filePath: that.image,
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						if (uploadFileRes.statusCode == 200) {
							var data = {
								"classifyName": that.classname,
								"createTime": "",
								"id": "",
								"image": uploadFileRes.data,
								"storeId": 1,
								"updateTime": ""
							}
							that.$http("/project-classify/create",
								'POST', data).then((res) => {
								console.log('添加', res.data.code)
								if (res.data.code == 200) {
									uni.showToast({
										title: "上传成功"
									})
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)

								} else {
									uni.showToast({
										title: "添加失败"
									})
								}
							})
						} else {
							uni.showToast({
								title: "图片上传失败",
								icon: "none"
							})
						}

					}
				});

			},
			//上传图片
			addimage() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						that.image = res.tempFilePaths[0]
					}
				});
			},
		}
	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}

	.box {
		padding: 20rpx;
		border-bottom: 1rpx solid #ECECEC;
		display: flex;
		align-items: center;
	}

	.box .left {
		flex: 0 0 20%;
	}

	.boxs {
		padding: 20rpx;
	}

	.boxs .right {
		padding: 20rpx;
		font-size: 30rpx;
		border-radius: 20rpx;
		border: 1rpx solid #ECECEC;
		margin: 20rpx 0;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.boxs .image {
		margin: 20rpx 0;
		width: 200rpx;
		height: 200rpx;
	}


	.button {
		width: 70%;
		margin: 50rpx auto;
		background-color: #F39E1C;
		height: 80rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
	}
</style>
